<template>
  <div>
    <el-dialog
      :title="option.title"
      :visible.sync="isShow"
      @close="closeUser"
      width="1180px"
      height="84%"
      @open="openCreate"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="loading">
        <div class="content">
          <el-card style="height:500px">
            <el-form
              size="mini"
              ref="form"
              :model="form"
              :rules="rules"
              inline
              label-width="150px"
              label-position="left"
            >
              <el-row :gutter="10">
                <el-col :span="24">
                  <ve-line   :data="lineData" width="1080px" height="500px" :extend="lineExtend"   ></ve-line>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType" >关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request1 from "@/common/utils/requestTest";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import dynamicTable from "@/components/dynamicTable/";
import veLine from "v-charts/lib/line";

export default {
  name: '',
  components: {
    dynamicTable
  },
  data() {
    return {
      radio: "",
      loading: false,
      lineData:{
        columns:['时间','NPS','客户满意度','一次解决率','人工请求率','目标'],
        rows:[
          {'时间':'00:15','NPS':'15','客户满意度':'4','一次解决率':'3','人工请求率':'5','目标':'20'},
          {'时间':'00:30','NPS':'30','客户满意度':'20','一次解决率':'5','人工请求率':'10','目标':'20'},
          {'时间':'00:45','NPS':'50','客户满意度':'22','一次解决率':'16','人工请求率':'20','目标':'20'},
          {'时间':'01:00','NPS':'40','客户满意度':'34','一次解决率':'45','人工请求率':'36','目标':'20'},
          {'时间':'01:15','NPS':'35','客户满意度':'15','一次解决率':'40','人工请求率':'10','目标':'20'},
          {'时间':'01:30','NPS':'40','客户满意度':'12','一次解决率':'33','人工请求率':'10','目标':'20'},
          {'时间':'01:45','NPS':'30','客户满意度':'25','一次解决率':'45','人工请求率':'20','目标':'20'},
          {'时间':'02:00','NPS':'20','客户满意度':'35','一次解决率':'50','人工请求率':'30','目标':'20'},
          {'时间':'02:15','NPS':'40','客户满意度':'30','一次解决率':'30','人工请求率':'45','目标':'20'},
        ]
      },
      lineExtend:{
        color:['#84d742','#9878ea','#ff9b78','#5488e6','#93e29d'],
        // title: {  
        //   subtext: '人均产能',
        //   subtextStyle:{
        //     fontSize:15,
        //     color:'black'
        //   },
        //   top:1,
        //   left:'left'
        // },
        series: {
          // symbol:'none',
          smooth:false,
        },
        xAxis:{
          boundaryGap:false,
        },
      },
      tableData:[
        { KPI: "呼入电话量", "0015": "120", "0030":"120", "0045":"150", "0100":"120", "0115":"120", "0130":"120", "0145":"120", "0200":"120", "0215":"120" },
        { KPI: "件均处理时长(s)", "0015": "160", "0030":"160", "0045":"160", "0100":"160", "0115":"160", "0130":"160", "0145":"160", "0200":"160", "0215":"160" },
        { KPI: "质量差错量(件)", "0015": "2", "0030":"2", "0045":"2", "0100":"2", "0115":"2", "0130":"2", "0145":"2", "0200":"2", "0215":"2" },
        { KPI: "客户满意度", "0015": "95%", "0030":"95%", "0045":"95%", "0100":"95%", "0115":"95%", "0130":"95%", "0145":"95%", "0200":"95%", "0215":"95%" },
        { KPI: "服销收入", "0015": "6000", "0030":"6000", "0045":"6000", "0100":"6000", "0115":"6000", "0130":"6000", "0145":"6000", "0200":"6000", "0215":"6000" },
        { KPI: "遵时率", "0015": "95%", "0030":"95%", "0045":"95%", "0100":"95%", "0115":"95%", "0130":"95%", "0145":"95%", "0200":"95%", "0215":"95%" },
      ],
      tableLabel: [
        { label: "KPI", width: "120",prop:"KPI",type:"normal" },
        { label: "0015", width: "",prop:"0015",type:"normal" },
        { label: "0030", width: "",prop:"0030",type:"normal" },
        { label: "0045", width: "",prop:"0045",type:"normal" },
        { label: "0100", width: "",prop:"0100",type:"normal" },
        { label: "0115", width: "",prop:"0115",type:"normal" },
        { label: "0130", width: "",prop:"0130",type:"normal" },
        { label: "0145", width: "",prop:"0145",type:"normal" },
        { label: "0200", width: "",prop:"0200",type:"normal" },
        { label: "0215", width: "",prop:"0215",type:"normal" },
      ],
      form: {

      },
        
      rules: {
      }
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
  },
  methods: {
    handleCurrentChange(row, event, column){
      console.log(row,event,column,event.currentTarget);
    },
    handleEdit(index,row){
      console.log(index,row);
    },
    handleDelete(index,row){
      console.log(index,row);
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.$emit("refreshTable");
      this.detailon = true;
      this.showCommon = false;
    },
    addType() {
      //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      this.$refs.form.clearValidate();
    },
    openCreate(){

    }
  }
};
</script>
<style lang="scss" scoped>


